CMS Dashboard Widgets Creation

This article describes the process of creating widgets in CMS for displays in the Dashboard. This activity can be performed by CMS Admin.

Before you start

You need to have the login credentials for CMS Admin. The default credential for CMS admin is admin/Root@123 and the login url will be store.sourcestore.com/cms/user/login.

Need to have the host entry in etc/hosts file because the CMS admin url is private.

You will beed the following skill sets to create a widget in CMS:

  • Drupal Coding Knowledge
  • PHP Knowledge

Tasks to be performed

You must perform 2 tasks to display the widget in Dashboard

TASK 1: Create Widget

TASK 2: Add widget to the Dashboard

Create Widget

A widget can be added in two ways.

  1. Online - Manually add the code through the UI (Normal User)
  2. Offline - Create a Drupal Module offline and import to the system (Advanced User)
  • Login to the CMS Admin Console as CMS Admin.

  • Click on Add Block under Structure > Block.

  • Add Block Description - this will display as the Title of the widget. Block body will contain the code for the widget. Select Text format PHP code if this field contains any dynamic scripting of PHP or JavaScript. You can add the code here to call the API to fetch the data, process it and display in the way you want.
  • Under Visibility settings > Roles Tab, Select the roles for which this widget should be visible.
  • Under Visibility settings > Dashboard Tab, select "Make this widget available in Dashboard". This will make the newly created widget available to be added to the Dashboard. Click on Save to save the widget.

If you are an advanced user who is well versed with the Drupal coding can use this method.
  • Create a Drupal module offline for adding a block. Quick preview of the sample code below. 
    /**
 * Implements
        hook_block_info().
 */
function module_name_block_info() {
  $blocks =
      array();
  $blocks['total_cost'] =
        array(
    'info' => t('Total
        cost'),
    'cache' =>
        DRUPAL_NO_CACHE,
  );
}
 
/**
 * Implements
        hook_theme().
 */
function module_name _theme() {
  return array(
    'total_cost' =>
        array(
        'template' =>
        'customer/customer-total-cost',
    )
}

    The template file "customer-total-cost.php" will contain the code for the widget.

  • Package the Module and Install the module by going to Modules > Install new module.

  • If Install option is not available, go to the Modules and enable Update Manager Module and do the above step.

  • Once the new module is installed. Go to Structure > Blocks. The block that is created using the module will be listed there. Edit the Block and Enable "Make this widget available in Dashboard" Under Visibility settings and select the Roles to which the widget should be visible as explained in the Option 1.
  • Now the New widget is ready to be added to the Dashboard
  • This completes TASK 1.

Add Widget to Dashboard

  • Navigate to Structure > Manage Dashboard page.

  • Click on Layout Link against the dashboard you want to add the widget.
  • Under Enable block, the block you have created will be listed. Select the widget and click on Save blocks.

  • Place the widget in the appropriate column and Save. Select/Unselect the check boxes for Visible, Open, Movable & Closable as per the need.

  • Now go to the Dashboard page. The widget configured now will be displayed in the Dashboard.

  • This completes TASK 2.